import React, { Component } from 'react'

export default class List extends Component {
    state = {
        msg: 'hello   react'
    }

    changeMsg = () => {
        this.setState({
            msg: 'hello  vue3  真牛逼'
        })
    }
    render () {

        console.log(this.props)
        return (
            <div>List
                <h1>  {this.props.name}--------{this.props.num}
                    {this.props.arr.map(item => <i>  {item}</i>)}

                </h1>
                <h2> {this.props.obj.name}------- {this.props.obj.age}</h2>
                <Father name='李四' num={100} fn={() => console.log('xxxx')}

                    msg={this.state.msg}


                ></Father>

                <button onClick={this.changeMsg}> 点击改变 msg</button>


                <hr />
                <Child name='小花'>
                    {/*  类似vue 中插槽 */}

                    <p>  今天天气真热</p>
                    <p>  今天天气真好</p>
                </Child>

                <Child></Child>
            </div>
        )
    }
}

function Father (props) {
    console.log(props)
    return (
        <div>  father  组件  ---------{props.name}------{props.num}

            <br />
            {props.fn()}------------  {props.msg}
        </div>
    )
}

function Child (props) {
    console.log(props.children)
    return (
        <>
            <div>  Child  组件</div>
            <h1> {props.name}</h1>

            {props.children ? props.children : null}
        </>

    )
}

